<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div class="box">box</div>
    <strong>strong</strong>
    <script>
      //需求:将strong标签修改成"<p style='color:pink;border:2px dotted #000;'>这是修改后的节点及内容</P>"
      //1.创建节点
      var newP = document.createElement("p");//创建新节点
      newP.setAttribute("style", "color:pink;border:2px dotted #000;");//设置节点属性
      newP.setAttribute("title", "节点修改");
      newP.innerHTML = "这是修改后的节点及内容";//添加文本内容
      console.log(newP);

      //2.替换节点
      var oBody = document.body; //对于节点的获取最好缓存到内存变量中
      var old = document.getElementsByTagName("strong")[0]; //返回的是一个数组必须用下标
      oBody.replaceChild(newP, old);
    </script>
  </body>
</html>
